import React, { Component } from 'react'
import { Layout, Breadcrumb } from 'antd';
import { Switch, Redirect, Route, withRouter, Link } from 'react-router-dom';
import MyRoute from "./MyRoute"
import mapData from "../configs/mapData"
import Loadable from 'react-loadable';


const { Content } = Layout;

// const Home = Loadable({
//     loader: () => import('../pages/Home'),
//     loading: () => <div>加载中......</div>
// })
// const AdminsList = Loadable({
//     loader: () => import('../pages/admins/AdminsList'),
//     loading: () => <div>加载中......</div>
// })
// const AddAdmin = Loadable({
//     loader: () => import('../pages/admins/AddAdmin'),
//     loading: () => <div>加载中......</div>
// })
// const UpdateAdmin = Loadable({
//     loader: () => import('../pages/admins/UpdateAdmin'),
//     loading: () => <div>加载中......</div>
// })
// const CarsList = Loadable({
//     loader: () => import('../pages/cars/CarsList'),
//     loading: () => <div>加载中......</div>
// })
// const CheckCar = Loadable({
//     loader: () => import('../pages/cars/CarCheck'),
//     loading: () => <div>加载中......</div>
// })
// const UsersList = Loadable({
//     loader: () => import('../pages/users/UsersList'),
//     loading: () => <div>加载中......</div>
// })
// const CheckUser = Loadable({
//     loader: () => import('../pages/users/CheckUser'),
//     loading: () => <div>加载中......</div>
// })
// const CheckOwner = Loadable({
//     loader: () => import('../pages/owners/CheckOwner'),
//     loading: () => <div>加载中......</div>
// })
// const OwnersList = Loadable({
//     loader: () => import('../pages/owners/OwnersList'),
//     loading: () => <div>加载中......</div>
// })
// const OrderList = Loadable({
//     loader: () => import('../pages/OrderList'),
//     loading: () => <div>加载中......</div>
// })
// const RemarkList = Loadable({
//     loader: () => import('../pages/Remark/RemarkList'),
//     loading: () => <div>加载中......</div>
// })
// const RemarkChart = Loadable({
//     loader: () => import('../pages/Remark/RemarkChart'),
//     loading: () => <div>加载中......</div>
// })


class NavContent extends Component {
    renderBreadNav = () => {
        //获取跳转的路由，拿到其面包屑导航的值
        const pathname = this.props.location.pathname;
        const arr = mapData[pathname];
        if (!arr) return null;
        return <>
            {
                arr.map((item, index) => {
                    return <Breadcrumb.Item key={`${item}-${index}`}>
                        {item.link ? <Link to={item.link}>{item.title}</Link> : item.title}
                    </Breadcrumb.Item>
                })
            }
        </>
    }
    render() {
        // console.log('pathname', this.props.location.pathname);
        return (
            <Layout style={{ padding: '0 24px 24px' }}>
                <Breadcrumb style={{ margin: '16px 0' }}>
                    {/* <Breadcrumb.Item>Home</Breadcrumb.Item>
                    <Breadcrumb.Item>List</Breadcrumb.Item>
                    <Breadcrumb.Item>App</Breadcrumb.Item> */}
                    {this.renderBreadNav()}
                </Breadcrumb>
                <Content
                    className="site-layout-background"
                    style={{
                        padding: 24,
                        margin: 0,
                        minHeight: 280,
                        backgroundColor: '#fff'
                    }}
                >
                    {/* <Switch>
                        <Redirect from="/main" exact to="/main/home" ></Redirect>
                        <Route path="/main/home" component={Home}></Route>
                        <Route path="/main/adminsList" component={AdminsList}></Route>
                        <Route path="/main/addAdmin" component={AddAdmin}></Route>
                        <Route path="/main/updateAdmin" component={UpdateAdmin}></Route>
                        <Route path="/main/carsList" component={CarsList}></Route>
                        <Route path="/main/checkCar" component={CheckCar}></Route>
                        <Route path="/main/usersList" component={UsersList}></Route>
                        <Route path="/main/checkUser" component={CheckUser}></Route>
                        <Route path="/main/ownersList" component={OwnersList}></Route>
                        <Route path="/main/checkOwner" component={CheckOwner}></Route>
                        <Route path="/main/orderList" component={OrderList}></Route>
                        <Route path="/main/remarkList" component={RemarkList}></Route>
                        <Route path="/main/remarkChart" component={RemarkChart}></Route>
                    </Switch> */}
                    <MyRoute></MyRoute>
                </Content>
            </Layout>
        )
    }
}

export default withRouter(NavContent)